<template>
  <div class="fxh_server">
    <!-- 头部一些选择信息 -->
    <div class="server_top">
      <!-- 第一行 - 签约  -->
      <div style="border-bottom: 1px dashed #efefef" class="top_one">
        <div class="display">
          <b class="top_text">签约状态</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择签约状态"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="top_text">签约机构</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择签约机构"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="top_text">医生团队</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择医生团队"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <b class="top_text">服务包</b>
          <el-select
            style="margin-right: 15px; width: 170px"
            v-model="value"
            class="m-2"
            placeholder="请选择服务包"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <!-- 第二行 - 选择日期 -->
      <div class="top_one">
        <b class="top_text">选择日期</b>
        <div class="display">
          <el-select
            style="margin-right: 15px; width: 430px"
            v-model="value"
            class="m-2"
            placeholder="请选择时间"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="display">
          <el-button type="primary">查询</el-button>
          <el-button>导出</el-button>
        </div>
      </div>
    </div>

    <!-- 中间内容信息 -->
    <div class="server_content">
      <div class="content_info">
        <ul>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
        </ul>
      </div>
      <div class="content_info">
        <ul>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
        </ul>
      </div>
      <div class="content_info">
        <ul>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
          <li>
            <el-card shadow="hover" body-style="height:160px">
              <!-- <el-image style="width: 100px; height: 100px" :src="url" /> -->
              <img
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                alt=""
              />
              <b>范筱涵</b>
              <span>女</span>
              <span>21岁</span>
              <div class="state">签约中</div>
              <p>
                个人信息：<i
                  >文字是人类用符号记录表达信息以传之久远的方式和工具。</i
                >
              </p>
              <p>
                <el-tag>Tag 1</el-tag>
                <el-tag class="ml-2" type="success">Tag 2</el-tag>
                <el-tag class="ml-2" type="info">Tag 3</el-tag>
              </p>
            </el-card>
          </li>
        </ul>
      </div>
      <!-- 最底部分页 -->
      <div class="content_page">
        <el-pagination
          background
          layout="->, prev, pager, next"
          :total="50"
          class="mt-4"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const url =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
</script>

<style lang="scss" scoped>
.fxh_server {
  // 顶部
  .server_top {
    .top_one {
      padding: 15px 0;
      margin: 0 25px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .top_text {
      margin-right: 20px;
    }
    .display {
      display: inline-block;
    }
  }

  // 内容数据
  .server_content {
    // background-color: pink;
    .content_info {
      // background-color: bisque;
      ul {
        margin: 0;
        padding: 0;
        display: flex;
        li {
          list-style: none;
          padding: 10px;

          // 图片
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
          }
          b {
            margin-right: 10px;
          }
          span {
            margin-right: 10px;
          }
          .state {
            display: inline-block;
            background-color: #15d6ba;
            color: #fff;
            padding: 5px 15px;
            border-radius: 15px;
            font-style: italic;
            text-align: right;
            vertical-align: top;
            transform: skew(-8deg, 35deg);
            margin-left: 10px;
          }
        }
      }
    }
  }

  // 分页
  .content_page{

    margin-top: 10px;
  }
}
</style>